import { createApp, toRaw } from 'vue'
import App from './App.vue'

const app = createApp(App);


/**
 * pinia  以及持久化插件
 */
import { createPinia, PiniaPluginContext } from 'pinia'
type Options = {
    key: string
}
// 存入localstorage
const setStorage = (key: string, value: any) => {
    localStorage.setItem(key, JSON.stringify(value))
}
// 取出
const getStorage = (key: string) => {
    return localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key) as string) : {}
}
const piniaPlugin = (options: Options) => {
    return (context: PiniaPluginContext) => {
        // 解构
        const { store } = context;
        const data = getStorage(`${options?.key ?? 'piniaData'}-${store.$id}`)
        store.$subscribe(() => {
            setStorage(`${options?.key ?? 'piniaData'}-${store.$id}`, toRaw(store.$state))
        })
        return { ...data }
    }
}
const store = createPinia()
store.use(piniaPlugin({
    key: 'pinia'
}))
app.use(store);



//vue-router
import router from '@/router/index'
app.use(router);


// 引入mitt 兄弟组件传参
import mitt from 'mitt'
const Mit = mitt()
declare module 'vue' {  //拓展声明
    export interface ComponentCustomProperties {
        $Bus: typeof Mit
    }
}
app.config.globalProperties.$Bus = Mit


//响应式
import 'amfe-flexible'

//element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus);

//animate动画
import 'animate.css/animate.min.css'

// iconPark和样式
import { install } from '@icon-park/vue-next/es/all';
install(app);
import '@icon-park/vue-next/styles/index.css';



//挂载
app.mount('#app');

export default app;
